<template>
	<view>
		<!-- 头部开始 -->
		<view class="box-bg">
			<uni-nav-bar
			 leftWidth='200rpx' rightWidth='200rpx'
			 @clickLeft="$utils.ret()" @clickRight="$utils.go('/pages/chat_details/chat_details')" left-icon="left" leftText="返回" right-icon="more-filled" title="楼长" />
		</view>
		<!-- 头部结束 -->
		
		<!-- 聊天页面开始 -->
		<view class="chatbox">
			<view class="one">
				<view class="img1">
					<image src="../../static/chat1.jpg" mode=""></image>
				</view>
				<view class="img2">
					<image src="../../static/chat_photo.jpg" mode=""></image>
				</view>
			</view>
			<view class="time">
				06-24 10:26
			</view>
			<view class="two">
				<view class="img1">
					<image src="../../static/chat1.jpg" mode=""></image>
				</view>
				<view class="content">
					小别墅面积72-94 m*m,<br />赠送花园40m*m大露台 总价176万/套起 现房 现房♥
				</view>
			</view>
			<view class="three">
				<view class="img1">
					<image src="../../static/chat1.jpg" mode=""></image>
				</view>
				<view class="img2">
					<image src="../../static/chat_video.jpg" mode=""></image>
				</view>
			</view>
			<view class="four">
				<view class="content">
					你们不是海口的吗
				</view>
				<view class="img1">
					<image src="../../static/chat2.jpg" mode=""></image>
				</view>
			</view>
			<view class="five">
				<view class="content">
					有海口经营商电话吗
				</view>
				<view class="img1">
					<image src="../../static/chat2.jpg" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 聊天页面结束 -->
		
		<!-- 输入框开始 -->
		<view class="input">
			<view class="bottom">
				<uni-icons type="mic" size="25"></uni-icons>
				<input type="text" />
				<view class="right">
					<uni-icons type="heart" size="25"></uni-icons>
					<uni-icons type="plus" size="25"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 输入框结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f0f0f0;
	}
// 头部开始
/deep/.uni-navbar__content{
	border: none;
}
// 头部结束

// 聊天页面开始
.chatbox {
	height: 1275rpx;
	margin-top: 46rpx;
	margin-left: 26rpx;
	.one {
		display: flex;
		.img1 image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
		.img2 image {
			width: 319rpx;
			height: 210rpx;
			margin-left: 18rpx;
		}
	}
	.time {
		width: 163rpx;
		height: 40rpx;
		background-color: #c7cacd;
		margin: 0 auto;
		font-size: 20rpx;
		color: #f0f0f0;
		border-radius: 5rpx;
		text-align: center;
		line-height: 40rpx;
		margin-top: 56rpx;
	}
	.two {
		display: flex;
		margin-top: 24rpx;
		.img1 image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
		.content {
			width: 520rpx;
			height: 201rpx;
			background-color: #fff;
			margin-left: 18rpx;
			font-size: 28rpx;
			padding-left: 15rpx;
			padding-top: 10rpx;
			line-height: 60rpx;
		}
	}
	.three {
		display: flex;
		margin-top: 32rpx;
		.img1 image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
		.img2 image {
			width: 177rpx;
			height: 309rpx;
			margin-left: 18rpx;
		}
	}
	.four {
		display: flex;
		justify-content: flex-end;
		.content {
			width: 260rpx;
			height: 78rpx;
			background-color: #60c696;
			color: #f0f0f0;
			font-size: 29rpx;
			text-align: center;
			line-height: 78rpx;
			border-radius: 5rpx;
			margin-right: 18rpx;
		}
		.img1 image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}
	}
	.five {
		display: flex;
		justify-content: flex-end;
		.content {
			width: 285rpx;
			height: 78rpx;
			background-color: #60c696;
			color: #f0f0f0;
			font-size: 29rpx;
			text-align: center;
			line-height: 78rpx;
			border-radius: 5rpx;
			margin-right: 18rpx;
		}
		.img1 image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}
	}
}
// 聊天页面结束

// 输入框开始
.input {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 144rpx;
	line-height: 144rpx;
	background-color: #f3f4f5;
	.bottom {
		display: flex;
		align-items: center;
		padding-left: 25rpx;
		box-sizing: border-box;
         .right{
			 width: 100rpx;
			 margin-left: 20rpx;
			 margin-right: 20rpx;
			 display: flex;
			 justify-content: space-between;
		 }
		 uni-input{
			 background-color: #fff;
			 width: 100%;
			 height: 80rpx;
			 margin-left: 20rpx;
			 // flex: 1;
		 }
	   
	}
}
// 输入框结束
</style>
